import React, { Component } from 'react';
import Buttondemo from './button/demo'
import { Route, Link } from 'react-router-dom';
import { TbcRow, TbcCol } from './layout/index.js'
import SelectDemo from './select/demo'
import InputDemo from './input/demo'
import CheckboxDemo from './checkbox/demo'
import FormDemo from './form/demo'
import TableDemo from './table/demo'
import TreeDemo from './tree/demo'
import ScrollBar from './scrollbar/demo'
import GestureDemo from './gesture/demo'
import ModalDemo from './modal/demo'
import PopperDemo from './popper/demo'
class Mycomponent extends Component {
  render () {
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <TbcRow>
          <TbcCol>
            <ul>
              <li><Link to="/Button">按钮</Link></li>
              <li><Link to="/Input">输入框</Link></li>
              <li><Link to="/Checkbox">复选框</Link></li>
              <li><Link to="/Select">下拉框</Link></li>
              <li><Link to="/Form">表单</Link></li>
              <li><Link to="/Table">表格</Link></li>
              <li><Link to="/Tree">树组件</Link></li>
              <li><Link to="/ScrollBar">滚动条</Link></li>
              <li><Link to="/Gesture">手势</Link></li>
              <li><Link to="/Modal">模态框</Link></li>
              <li><Link to="/Popper">Popper</Link></li>
            </ul>
          </TbcCol>
          <TbcCol>
            <div style={{margin: '50px 0px 0px 50px'}}>
              <Route path="/Button" component={Buttondemo}></Route>
              <Route path="/Input" component={InputDemo}></Route>
              <Route path="/Checkbox" component={CheckboxDemo}></Route>
              <Route path="/Select" component={SelectDemo}></Route>
              <Route path="/Form" component={FormDemo}></Route>
              <Route path="/Table" component={TableDemo}></Route>
              <Route path="/Tree" component={TreeDemo}></Route>
              <Route path="/ScrollBar" component={ScrollBar}></Route>
              <Route path="/Gesture" component={GestureDemo}></Route>
              <Route path="/Modal" component={ModalDemo}></Route>
              <Route path="/Popper" component={PopperDemo}></Route>
            </div>
          </TbcCol>
        </TbcRow>
      </div>
    )
  }
}

export default Mycomponent;